<template>
  <div class="middle">
    <h1 class="label">{{props.label}}</h1>
    <div class="time">
      <div class="time-item">
        <p>{{durationFormatter.dd}}<span>天</span></p>
      </div>
      <div class="time-item">
        <p>{{durationFormatter.hh}} <span>时</span></p>
      </div>
      <div class="time-item">
        <p>{{durationFormatter.mm}}<span>分</span></p>
      </div>
      <div class="time-item">
        <p>{{`${durationFormatter.ss}`.padStart(2, '0')}}<span>秒</span></p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref} from 'vue'
import dayjs from 'dayjs'

interface Props {
  label?: string
  textColor?: string
  backgroundColor?: string
  height?: string
  width?: string
  // 依次传递 label 时间 描述 的字体大小
  fontSize?: string[]
  mFontSize?: string[]
  // 结束时间, 单位毫秒
  endTime?: number
}
const emit = defineEmits(['time-end'])
const props = withDefaults(defineProps<Props>(), {
  label: '放假倒计时',
  textColor: '#d99c3b',
  backgroundColor: '#cf1322',
  width: '100%',
  height: '100%',
  fontSize: () => {
    return ['2.2rem', '1.2rem', '3rem']
  },
  mFontSize: () => {
    return ['1.7rem', '0.8rem', '2rem']
  }, 
  endTime: dayjs('2022-01-28').valueOf()
})



const timeLeft = ref(dayjs(props.endTime).diff(dayjs(Date.now()), 'seconds'))

console.log(timeLeft.value, 'timeLefttimeLefttimeLeft')
const durationFormatter = computed(() => {
  const time = timeLeft.value
  if (!time) return { ss: 0 }
  let t = time
  const ss = t % 60
  t = (t - ss) / 60
  if (t < 1) return { ss }
  const mm = t % 60
  t = (t - mm) / 60
  if (t < 1) return { mm, ss }
  const hh = t % 24
  t = (t - hh) / 24
  if (t < 1) return { hh, mm, ss }
  const dd = t
  return { dd, hh, mm, ss }
})



  let timer: any = null
  const getTime = () => {
    // 避免重复执行 setTimeout
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      console.log('?????')
      if (timeLeft.value >= 0) {
        --timeLeft.value
        getTime() 
      } else {
        emit('time-end', props.endTime)
      }
    }, 1000)
  }
onMounted(() => {
  getTime()
  console.log('mounteed')
})

</script>
<style lang="scss" scoped>
.middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: v-bind('props.height');
  width: v-bind('props.width');
  user-select: none;
  background-color: v-bind('props.backgroundColor');
  padding: 20px 10px;
  .label {
    font-size: v-bind('props.fontSize[0]');
    color: v-bind('props.textColor');
  }
  .time {
    color: v-bind('props.textColor');
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    &-item {
      padding: 0 14px;
      font-size: v-bind('props.fontSize[1]');
      p {
        font-size: v-bind('props.fontSize[2]');
      }
    }
  }
}

@media (max-width: 740px) {
  .lbale {
    font-size: v-bind('props.mFontSize[0]');
  }
  .time {
    .time-item {
      padding: 0 16px;
      font-size: v-bind('props.mFontSize[1]');
      p {
        font-size: v-bind('props.mFontSize[2]');
      }
    }
  }
}

</style>